<template>
  <div class="content">
    <div class="hander">
      <div class="pageTop">
        <div class="middleName">
          水产养殖模型
        </div>
        <div class="btnList">
          <div class="btn" :class="modeFlag == 1 ? 'activeBtn' : ''" @click="changeMode(1)">
            <div class="line"></div>
            生长模型
          </div>
          <div class="btn" :class="modeFlag == 2 ? 'activeBtn' : ''" @click="changeMode(2)">
            <div class="line"></div>
            当前现状
          </div>
        </div>
      </div>
    </div>
    <el-row class="row">
      <div class="growthInfoModule" :class="modeFlag == 2 ? 'removeGrowthInfoModule' : 'growthInfoModule'">
        <GrowthInfo v-if="resetMiddle" :modeFlag="modeFlag" :growObj="growObj" :stageList="annualGrowthCycleList">
        </GrowthInfo>
      </div>
      <el-col :span="5" class="col">
        <div class="left" :class="modeFlag == 2 ? 'removeLeft' : 'left'">
          <div class="purple batchInfo gradient-border">
            <div class="configTitle">
              <i class="titleIcon"></i>
              <span class="configLabel">批次信息</span>
              <div class="batch">
                <el-select class="w100p" v-model="chooseBatch" filterable placeholder="请选择" @change="handleChangeBatch">
                  <el-option v-for="item, index in batchList" :key="index" :label="item.batchName"
                    :value="item.batchId">
                  </el-option>
                </el-select>
              </div>
            </div>
            <div class="info">
              <div class="item">养殖品种：<el-select v-model="plantVarietyId" filterable placeholder="请选择"
                  @change="handleChangePlantVariety">
                  <el-option v-for="item, index in batchInfoList" :key="index" :label="item.plantVarietyName"
                    :value="item.plantVarietyId">
                  </el-option>
                </el-select>
              </div>
              <div class="item">养殖批次号：{{ batchInfo.batchCode }}</div>
              <div class="item">开始养殖时间：{{ batchInfo.closePondDate || '--' }}</div>
            </div>
          </div>
          <div class="purple weather gradient-border">
            <div class="configTitle">
              <i class="titleIcon"></i>
              <span class="configLabel">{{ getDayOfWeek() }}</span>
            </div>
            <div class="iframeView">
              <iframe v-if="resetTianqiView" id="iFrame" style="width:100% ;height: 100% ; color: #000000;"
                scrolling="no" frameborder="0" allowtransparency="true"
                src="https://i.tianqi.com?c=code&amp;id=95&amp;color=%23ffffff&amp;icon=1&amp;&amp;site=10"></iframe>
            </div>
            <div class="weatherList">
              <div class="item" v-for="item, index in otherweatherdata" :key="index">
                <div class="dataItemName">{{ item.dataItemName }}</div>
                <div class="dataItemValue">{{ item.lastValue1 }}{{ item.symbol }}</div>
              </div>
            </div>
          </div>
          <div class="purple agritask gradient-border">
            <div class="configTitle">
              <i class="titleIcon"></i>
              <span class="configLabel">近期作业情况</span>
            </div>
            <div class="agritaskList">
              <div class="item" v-for="item, index in jobList" :key="index">
                {{ item.workCompleteTime }}
                <span v-show="item.workType == 'FEEDING'">投喂作业</span>
                <span v-show="item.workType == 'HANGING_NET'">吊网作业</span>
                <span v-show="item.workType == 'EXPOSED_NET'">漏网作业</span>
                <span v-show="item.workType == 'CHANGE_WATER'">换水作业</span>
                <span v-show="item.workType == 'DISINFECTION_WATER'">消杀作业</span>
                <div class="leftLine line"></div>
                <div class="rightLine line"></div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="14" class="col">
        <div class="middle" :class="modeFlag == 2 ? 'removeMiddle' : 'middle'">
          <div class="farmingModel">
            <Middle v-if="resetMiddle" :modeFlag="modeFlag" :growObj="growObj" :stageList="annualGrowthCycleList">
            </Middle>
            <!-- <div class="batchInfo">
              <div class="batch">
                <el-select class="w100p" v-model="chooseBatch" filterable placeholder="请选择" @change="handleChangeBatch">
                  <el-option v-for="item, index in batchList" :key="index" :label="item.batchName"
                    :value="item.batchId">
                  </el-option>
                </el-select>
              </div>
              <div class="info">
                <div class="item">养殖品种：<el-select v-model="plantVarietyId" filterable placeholder="请选择"
                    @change="handleChangePlantVariety">
                    <el-option v-for="item, index in batchInfoList" :key="index" :label="item.plantVarietyName"
                      :value="item.plantVarietyId">
                    </el-option>
                  </el-select>
                </div>
                <div class="item">养殖批次号：{{ batchInfo.batchCode }}</div>
                <div class="item">开始养殖时间：{{ batchInfo.closePondDate || '--' }}</div>
              </div>
            </div> -->
          </div>
          <div class="growthCycle">
            <div class="growthItem">
              <div>
                <div class="label"> <i class="titleIcon"></i>理论生长周期</div>
                <div class="w100p cycle">
                  <!-- annualGrowthCycleList -->
                  <div class="growth"
                    :style="{ width: `${item.growDay / growthCycleTotal * 100}%`, background: randomColors[index] }"
                    :title="`阶段${item.growStageName},实际生长周期${annualGrowthCycleList[index].annualGrowDay}天,理论生长周期${item.growDay || 0}天。`"
                    v-for="item, index in growthCycleList" :key="index">{{ item.growStageName }}
                  </div>
                </div>
              </div>
            </div>
            <div class="growthItem">
              <div>
                <div class="label"><i class="titleIcon"></i>实际生长周期</div>
                <div class="w100p cycle">
                  <!-- annualGrowthCycleList -->
                  <div class="growth" @click="changeGrowDay(item)"
                    :style="{ width: `${item.annualGrowDay / annualGrowthCycleTotal * 100}%`, background: randomColors[index] }"
                    :title="`阶段${item.growStageName},实际生长周期${item.annualGrowDay}天,理论生长周期${growthCycleList[index].growDay || 0}天。`"
                    v-for="item, index in annualGrowthCycleList" :key="index">{{ item.growStageName }}
                    <div class="currentStage el-icon-caret-bottom" v-if="growObj.growStageId == item.growStageId">
                    </div>
                  </div>
                </div>
              </div>
              <el-dialog :close-on-click-modal="false"  title="调整阶段" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                  <el-form-item label="阶段名称">
                    {{ ruleForm.growStageName }}
                  </el-form-item>
                  <el-form-item label="阶段天数" prop="annualGrowDay">
                    <el-input v-model="ruleForm.annualGrowDay"></el-input>
                  </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="dialogVisible = false">取 消</el-button>
                  <el-button type="primary" @click="editBatchPondGrow">确 定</el-button>
                </span>
              </el-dialog>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="5" class="col">
        <div class="right" :class="modeFlag == 2 ? 'removeRight' : 'left'">
          <div class="purple growStage">
            <div class="configTitle">
              <i class="titleIcon"></i>
              <span class="configLabel">生长阶段特征</span>
            </div>
            <div class="contentModuel">
              <el-select class="w100p" v-model="growStageId" filterable placeholder="请选择" @change="getGrowInfo">
                <el-option v-for="item, index in annualGrowthCycleList" :key="index" :label="item.growStageName"
                  :value="item.growStageId">
                </el-option>
              </el-select>
              <div class="growStageInfoList">
                <div class="growStageInfo" v-for="item, index in growthFeaturesManageList" :key="index">
                  阶段特征{{ index + 1 }}:{{ item.content + item.content + item.content + item.content }}
                </div>
              </div>
            </div>
          </div>
          <div class="purple dataitem-box">
            <div class="configTitle">
              <i class="titleIcon"></i>
              <span class="configLabel">生长环境数据</span>
            </div>
            <div class="contentModuel">
              <EnvironmentalData :list="environmentalDataList"></EnvironmentalData>
              <span class="errorText" v-show="environmentalDataList.length == 0">无生长环境数据</span>
            </div>
          </div>
          <div class="purple alarm-con">
            <div class="configTitle">
              <i class="titleIcon"></i>
              <span class="configLabel">参数异常提醒</span>
            </div>
            <div class="contentModuel">
              <div class="warningInfo" :title="`${item.baseAlarmName}:${item.message}`" v-show="index < 3"
                v-for="item, index in alarmHandlingList" :key=index>
                <span class="warningName">{{ item.baseAlarmName }}：</span> {{ item.message }}
              </div>
              <span class="errorText" v-show="alarmHandlingList.length == 0">无异常告警</span>
            </div>
          </div>
          <!-- <div class="purple growth">
            <div class="configTitle">
              <i class="titleIcon"></i>
              <span class="configLabel">自动生长记录照片</span>
            </div>
            <div class="contentModuel">
              <GrowthRecord :srcList="srcList"></GrowthRecord>
            </div>
          </div> -->
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import axios from "axios";
import MainSlot from "@/components/MainSlot";
import Middle from "./components/middle";
import GrowthInfo from "./components/growthInfo";
import EnvironmentalData from "./components/environmentalData";
import GrowthRecord from "./components/growthRecord";

import batch from '@/api/batch/batchManagement';
import cropModelConfig from '@/api/cropModel/cropModelConfig'
import jobTaskManagement from '@/api/jobManagment/jobTaskManagement';//作业
import nowpagereq from "@/api/iotMonitoring/meteorologicalMonitoring.js"; //气象
import alarmHandling from '@/api/monitoringAlarmManagement/alarmHandling.js';  //告警数据
import facilityManagement from '@/api/digtalOperation/facilityManagement.js';//养殖设施
import environmentalDataMonitoring from '@/api/iotMonitoring/environmentalDataMonitoring'; //物联数据
import growthFeaturesManage from '@/api/cropModel/growthFeaturesManage' //阶段生长特征
import { formatTime } from '@/utils/fmtTime.js';
import { getToken } from '@/utils/auth'

export default {
  components: { MainSlot, Middle, EnvironmentalData, GrowthRecord, GrowthInfo },
  data() {
    let validatorNumber = function (rule, value, callback) {
      if (value > 0 && value % 1 == 0) {
        callback()
      } else {
        callback(new Error('请输入大于0的整数！'))
      }
    }
    return {
      modeFlag: 1,
      dialogVisible: false,
      resetMiddle: true,
      loading: false,
      batchList: [],
      srcList: [],
      batchInfo: {},
      ruleForm: {},
      batchInfoList: [],
      chooseBatch: '',
      batchPondId: '',
      plantVarietyId: '',
      stageList: [],
      growthCycleList: [],
      annualGrowthCycleList: [],
      growStageId: '',
      rules: {
        annualGrowDay: [{ required: true, validator: validatorNumber, trigger: 'change' }]
      },
      randomColors: [
        "#0c97eb",
        "#0c85eb",
        "#5c9af0",
        "#084482",
        "#3c0fc1",
        "#335396",
        "#649ee6",
        "#747eef",
        "#c064e6",
        "#ed79c9",
        "#3382f0",
        "#1b48f0",
        "#0a34d0",
        "#0c2da6",
        "#031d7c",
        "#0d5dcc",
        "#649ee6",
        "#747eef",
        "#c064e6",
        "#ed79c9"
      ],
      growthCycleTotal: 0,
      annualGrowthCycleTotal: 0,
      jobList: [],
      otherweatherdata: [],
      alarmHandlingList: [],
      environmentalDataList: [],
      growthFeaturesManageList: [],
      growObj: {},
      resetTianqiView: true,
      rearingDays: 1,
      cameralist: []
    }
  },
  mounted() {
    this.initData();
    this.resetTianqi();
  },
  methods: {
    getDayOfWeek() {
      const daysOfWeek = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
      const today = new Date();
      const dayOfWeekIndex = today.getDay(); // getDay() 方法返回一周中的第几天（0-6），其中 0 代表星期日，1 代表星期一，以此类推。  
      return formatTime(new Date(), 'yyyy-MM-dd') + ' ' + daysOfWeek[dayOfWeekIndex];
    },
    async initData() {
      //获取养殖设施；
      let { data: facilityList } = await facilityManagement.getFacilityListByConditionAll({
        breedType: sessionStorage.breedType
      });
      this.facilityList = facilityList || [];
      // 获取批次列表 
      let { data } = await batch.queryByCondition({ batchType: 'BREEDING', status: 'SEALED_POND' });
      this.batchList = data || [];
      if (this.batchList.length > 0) {
        this.chooseBatch = data[0].batchId;
        this.batchInfo = {
          ...data[0],
          closePondDate: formatTime(data[0].closePondDate, 'yyyy-MM-dd HH:mm:ss')
        };
        this.rearingDays = this.getDays(data[0].closePondDate, new Date())
        this.queryAllByBatchId(data[0].batchId)
      } else {
        this.$message.warning('未查询到养殖批次')
        this.chooseBatch = '';
        this.batchInfo = {};
      }
      this.getotherweatherdatalefttwo();
      // this.randomColors = Array.from({ length: 50 }, () => this.getRandomColor());
    },
    async getGrowInfo() {
      if (!this.growStageId || !this.plantVarietyId) {
        this.growthFeaturesManageList = [];
        return
      }
      let params = {
        growStageId: this.growStageId,
        plantVarietyId: this.plantVarietyId
      };
      let { data: growthFeaturesManageList } = await growthFeaturesManage.queryByCondition(params); //阶段生长特征
      this.growthFeaturesManageList = growthFeaturesManageList || [];
    },
    getDays(startTime, endTime) {
      // 计算毫秒差  
      let diffInMilliseconds = Math.abs(new Date(endTime) - new Date(startTime));
      // 将毫秒差转换为天数  
      // 注意：这里我们使用了 Math.ceil 来向上取整，因为即使只有一小部分时间，我们也通常将其计为一天。  
      // 但是，根据你的具体需求，你也可以选择使用 Math.floor 来向下取整，或者使用其他逻辑来处理时间的部分。  
      let diffInDays = Math.ceil(diffInMilliseconds / (1000 * 60 * 60 * 24));
      return diffInDays
    },
    resetTianqi() {
      this.resetTianqiView = true;
      setTimeout(() => {
        this.resetTianqiView = false;
        this.$nextTick(() => {
          this.resetTianqiView = true;
        })
      }, 2000)
    },
    changeMode(flag) {
      this.modeFlag = flag;
    },
    getCameraImage(list) {
      if (!list.length) return;
      let promiseList = [];
      let cameraList = []
      list.forEach(item => {
        let cameraId = item.camera?.cameraId || '';
        if (!cameraList.includes(cameraId) && cameraId) {
          cameraList.push(cameraId)
        }
      })
      console.log(cameraList)
      cameraList.forEach(id => {
        promiseList.push(
          new Promise((resolve, reject) => {
            axios({
              method: "post",
              url: 'https://gateway.matefarm.net/fish/iot/cameraOperation/capture',
              headers: {
                databaseName: sessionStorage.databaseName,
                accessToken: getToken("token"),
                enctype: "multipart/form-data",
                organizationList: sessionStorage.organizationList,
                organizationNo: sessionStorage.organizationNo,
                virtualSystemNo: sessionStorage.virtualSystemNo
              },
              data: {
                cameraId: id
              },
            }).then((response) => {
              resolve(response.data);
            }).catch(error => {
              console.log(error);
              //特殊的处理方式避免promiseAll出错后不响应其他结果，所以这里可以将报错结果通过resolve以正确的方式抛出，resolve抛出的结果可以自定义我这里就直接传空对象了
              resolve({})
            })
          })
        )
      })

      Promise.all(promiseList).then(resList => {
        resList.forEach(res => {
          let { data } = res
          if (data) {
            this.srcList.push(data.picUrl)
          }
        })
        console.log(this.srcList)
      }).catch(err => {
        console.log(err)
      })

    },
    // 获取数据类型-温度-酸碱度等位置及其图片
    getDataItemList(facilityId) {
      let facilityNo = ''
      this.environmentalDataList = [];
      this.srcList = [];
      if (!facilityId) return;
      let facility = this.facilityList.find(obj => obj.facilityId == facilityId)
      facilityNo = facility.facilityNo
      environmentalDataMonitoring.getdataitemlisttwo(facilityNo).then((res) => {
        let data = res.data || [];
        this.environmentalDataList = data
        //console.log(this.environmentalDataList)
      });
      // nowpagereq.getlist({ facilityNo: facilityNo }).then(res => {
      //   let data = res.data.content;
      //   this.cameralist = data || [];
      //   console.log(this.cameralist, '456454646')
      //   this.getCameraImage(this.cameralist);
      // });
    },
    //获取气象数据
    async getotherweatherdatalefttwo() {
      let res = await nowpagereq.getweatherdatalefttwo();
      let zhlist = res.data;
      let newlist = [];
      zhlist.forEach((item, index) => {
        if (
          item.dataTypeName === "天气现象" ||
          item.dataTypeName === "风向描述"
        ) {
          let enumListTypelist = this.handenumListmet(item.enumListType);
          item.lastValue1 = enumListTypelist[item.lastValue1].name;
          item.symbol = "";
          newlist.push({ ...item });
        } else {
          newlist.push({ ...item });
        }
      });
      this.otherweatherdata = newlist;
      // this.otherweatherdata = [
      //   {
      //     dataItemName: '水温',
      //     lastValue1: 10,
      //     symbol: '摄氏度'
      //   }
      // ];
    },
    //获取作业信息
    async getBtchWorkInfo(id) {
      let batchId = id;
      //作业
      let { data: jobList } = await jobTaskManagement.queryByCondition({
        batchId, workStatus: "COMPLETE", status: "ENABLE"
      });
      this.jobList = jobList.reverse();
    },
    //获取批次环境数据
    async getAlarmHandling(batchName) {
      //console.log('---', batchName)
      this.alarmHandlingList = []
      if (!batchName) return
      let params = {
        batchName: batchName,
        disposeStatus: false,
        simpleEntity: false
      }
      let { data: alarmHandlingList } = await alarmHandling.quertbycond({ ...params });
      this.alarmHandlingList = alarmHandlingList
      //console.log('---', alarmHandlingList)
    },

    // getRandomColor() {
    //   let r = Math.floor(Math.random() * 256); // 随机生成0-255之间的红色值  
    //   let g = Math.floor(Math.random() * 256); // 随机生成0-255之间的绿色值  
    //   let b = Math.floor(Math.random() * 256); // 随机生成0-255之间的蓝色值  

    //   // 将RGB值转换为十六进制，并确保它们是两位数（如果只有一位数，则在前面添加0）  
    //   r = r.toString(16).padStart(2, '0');
    //   g = g.toString(16).padStart(2, '0');
    //   b = b.toString(16).padStart(2, '0');

    //   // 返回十六进制颜色字符串  
    //   return `#${r}${g}${b}`;
    // },
    changeGrowDay(item) {
      this.dialogVisible = true;
      this.ruleForm = JSON.parse(JSON.stringify(item))
    },
    editBatchPondGrow() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          let params = {
            batchPondId: this.batchPondId,
            growDay: this.ruleForm.annualGrowDay,
            growStageId: this.ruleForm.growStageId,
            growStageName: this.ruleForm.growStageName
          }
          cropModelConfig.editBatchPondGrow(params).then(res => {
            if (res.code == 1) {
              this.getStageList(this.plantVarietyId, this.batchPondId);
              this.dialogVisible = false;
            }
          })
        } else {
          return false;
        }
      });
    },
    handleChangeBatch(id) {
      let result = this.batchList.find(obj => obj.batchId == id);
      this.batchInfo = {
        ...result,
        closePondDate: formatTime(result.closePondDate, 'yyyy-MM-dd HH:mm:ss')
      };
      //console.log(result)
      this.getBtchWorkInfo(id);
      this.getDataItemList(result.facilityId);
      this.queryAllByBatchId(result.batchId);
      this.getAlarmHandling(result.batchName);
    },
    async getStageList(plantVarietyId, batchPondId) {
      this.resetMiddle = false
      //实际生长
      let { data: annualGrowthCycleList } = await cropModelConfig.queryAnnualGrowthCycleList(plantVarietyId, batchPondId);
      //理论生长
      let { data: growthCycleList } = await cropModelConfig.queryGrowthCycleListByPlantVarietyId(plantVarietyId);

      this.annualGrowthCycleList = annualGrowthCycleList || [];
      this.annualGrowthCycleTotal = this.annualGrowthCycleList.reduce((accumulator, currentValue) => {
        return accumulator + Number(currentValue.annualGrowDay);
      }, 0);
      let interpolation = 0;
      let growObj = null
      let length = this.annualGrowthCycleList.length
      if (!length) return
      this.annualGrowthCycleList.forEach(item => {
        interpolation += item.annualGrowDay;
        //console.log(this.rearingDays, interpolation)
        if (this.rearingDays <= interpolation && !growObj) {
          growObj = { ...item }
        }
      })
      this.growObj = growObj || this.annualGrowthCycleList[length - 1]
      console.log(this.growObj, '-----------------')
      //console.log(this.annualGrowthCycleTotal, this.rearingDays)
      this.growthCycleList = growthCycleList || []
      this.growthCycleTotal = this.growthCycleList.reduce((accumulator, currentValue) => {
        return accumulator + Number(currentValue.growDay || 0);
      }, 0);
      this.growStageId = this.annualGrowthCycleList.length > 0 ? this.annualGrowthCycleList[0].growStageId : '';
      this.getGrowInfo();
      //console.log(this.growthCycleList)
      this.$nextTick(() => {
        this.resetMiddle = true
      })
    },
    handleChangePlantVariety(id) {
      this.plantVarietyId = id;
      this.getStageList(this.plantVarietyId, this.batchPondId);
    },
    async queryAllByBatchId(id) {
      if (!id) return;
      let { data } = await batch.queryAllByBatchId(id)
      this.batchInfoList = data || [];
      if (this.batchInfoList.length > 0) {
        let batchId = data[0].batchId;
        let batchName = this.batchList.find(obj => obj.batchId == batchId).batchName;
        let facilityId = this.batchList.find(obj => obj.batchId == batchId).facilityId
        this.plantVarietyId = data[0].plantVarietyId;
        this.batchPondId = data[0].batchPondId;
        this.getAlarmHandling(batchName)
        this.getBtchWorkInfo(batchId)
        this.getStageList(this.plantVarietyId, this.batchPondId)
        this.getDataItemList(facilityId)
      } else {
        this.$message.warning('该批次无养殖信息')
        this.plantVarietyId = ''
      }
      //console.log(this.batchInfoList)
    },
    // 枚举字符串处理方法
    handenumListmet(str) {
      let controlslist = [];
      var arr = str.split(";");
      for (var i = 0; i < arr.length; i++) {
        let diy = arr[i].split(":");
        controlslist.push({
          name: diy[1],
          value: diy[0]
        });
      }
      return controlslist;
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => { });
    }
  }
};
</script>
<style lang="scss" scoped>
/* 隐藏滚动条 */
*::-webkit-scrollbar {
  display: none;
}

::v-deep .slotModule {
  background: #00000000;
  box-shadow: none;
  padding: 5px;
  border-radius: 0;
}

.content {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-image: url("../../../assets/cropModelConfig.jpg");
  background-color: #003360 !important;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;

  .hander {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%);
    width: 58%;
    height: 100px;
    overflow: hidden;
    z-index: 1;

    .pageTop {
      width: 1600px;
      height: 100px;
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate(-50%);

      .middleName {
        background-image: url(../../../assets/zumxTop.png);
        background-repeat: no-repeat;
        background-size: 100%;
        width: 100%;
        height: 70px;
        line-height: 70px;
        text-align: center;
        font-size: 24px;
        font-weight: bold;
        color: #ffffff;
      }

      .btnList {
        width: 210px;
        height: 30px;
        display: flex;
        justify-content: space-between;
        margin: 0 auto;

        .btn {
          width: 100px;
          text-align: center;
          line-height: 30px;
          color: #0365b4;
          background: radial-gradient(ellipse, #e6f7ff, rgb(116, 192, 255));
          position: relative;
          box-sizing: border-box;
          cursor: pointer;
          transition: all 1s;

          .line {
            position: absolute;
            top: -1px;
            left: 50%;
            transform: translate(-50%, 0);
            width: 70px;
            height: 3px;
            background-color: #ffffff;
          }

          &:hover {
            background: radial-gradient(ellipse, rgb(8, 101, 177), #aee5ff);
            border: 1px solid rgb(8, 101, 177);
            color: #ffffff;

            .line {
              border: 1px solid rgb(8, 101, 177);
              border-top: 1px solid rgb(255, 255, 255);
            }
          }

        }

        .activeBtn {
          background: radial-gradient(ellipse, rgb(8, 101, 177), #aee5ff);
          border: 1px solid rgb(8, 101, 177);
          color: #ffffff;

          .line {
            border: 1px solid rgb(8, 101, 177);
            border-top: 1px solid rgb(255, 255, 255);
          }
        }
      }
    }
  }


  .row {
    width: 100%;
    height: 100%;
  }

  .col {
    height: 100%;
  }
}

.purple {
  padding: 10px;
  margin: 15px;
  box-sizing: border-box;
  box-shadow: inset 0 0px 10px 5px rgba(1, 179, 255, 0.672);
  border-radius: 4px;

  .content {
    height: calc(100% - 30px);
    overflow-y: auto;
    background-color: #003360;


  }

  &:last-child {
    margin-bottom: 0;
  }
}

.left {
  height: 100%;
  background-color: #003360;
  overflow: hidden;
  transition: all 1s;


  .weather {
    height: 54%;

    .weatherList {
      max-height: calc(100% - 290px);
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      overflow-y: auto;

      .item {
        width: calc(50% - 10px);
        margin: 5px;
        border: 1px solid #1397ED;

        .dataItemName {
          font-size: 14px;
          text-align: center;
          line-height: 20px;
          background: linear-gradient(90deg, #3BE6F5, #22A0F0, #0AA0EB);
        }

        .dataItemValue {
          text-align: center;
          line-height: 30px;
          color: #ffffff
        }
      }
    }

    #iFrame {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
    }
  }

  .batchInfo {
    height: 18%;
    top: 10px;
    font-size: 14px;
    color: #ffffff;
    border-radius: 4px;

    .batch {
      color: #ffffff;
      line-height: 36px;
    }

    .info {

      .item {
        line-height: 30px;
      }
    }

    ::v-deep .el-input__inner {
      background-color: #00000000;
      border: 1px solid #00000000;
      font-size: 14px;
      color: #ffffff;
    }
  }

  .agritask {
    height: 20%;

    .agritaskList {
      height: calc(100% - 30px);
      overflow-y: auto;

      .line {
        position: absolute;
        // background-color: #ffffff;
        width: 6px;
        height: calc(100% + 6px);
        border: 2px solid #2f6a9b
      }

      .item {
        margin: 10px 0;
        color: #ffffff;
        padding: 10px 10px;
        font-size: 14px;
        position: relative;

        &:nth-child(odd) {
          box-shadow: inset 0 0px 10px 5px rgba(1, 179, 255, 0.672);
        }

        &:hover {
          box-shadow: inset 0 0px 10px 5px rgba(1, 179, 255, 0.864);

          .line {
            background-color: #ffffff;
          }
        }
      }



      .leftLine {
        top: -3px;
        left: 0px;
        border-radius: 3px 0 0 3px;
      }

      .rightLine {
        top: -2px;
        right: 0px;
        border-radius: 0 3px 3px 0;
      }
    }
  }
}

.right {
  height: 100%;
  background-color: #003360;
  overflow: hidden;
  transition: all 1s;


  .alarm-con {
    height: calc(30% - 15px);
  }

  .dataitem-box {
    height: calc(46% - 15px);

    .contentModuel {
      max-height: calc(100% - 30px);
      overflow: auto;
    }
  }

  .growth {
    height: 26%;
  }
}

.growStage {
  height: 20%;
  color: #ffffff;

  .growStageInfo {
    line-height: 30px;
    font-size: 12px;
  }

  ::v-deep .el-input__inner {
    background-color: #00000000;
    border: 1px solid #00000000;
    font-size: 14px;
    color: #ffffff;
  }

  .contentModuel {
    height: calc(100% - 30px);

    .growStageInfoList {
      max-height: calc(100% - 30px);
      overflow: auto;
    }
  }
}

.warningInfo {
  margin-bottom: 5px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 26px;
  color: #ffffff;
  overflow: hidden; //超出隐藏
  text-overflow: ellipsis; //文本超出时显示省略号
  display: -webkit-box;
  -webkit-box-orient: vertical; //子元素排列 vertical（竖排）orhorizontal（横排）
  -webkit-line-clamp: 1; //内容限制的行数

  &:nth-child(odd) {
    box-shadow: inset 0 0px 10px 5px rgba(1, 179, 255, 0.672);
  }
}

// .gradient-border {
//   position: relative;
//   /* 确保伪元素能够正确定位 */
//   /* 其他样式，如宽度、高度、背景色等 */
// }

// .gradient-border::after {
//   content: '';
//   /* 伪元素需要内容来显示，但这里使用空内容 */
//   position: absolute;
//   /* 绝对定位使伪元素脱离正常文档流 */
//   left: 0;
//   top: 0;
//   /* 定位到底部 */
//   width: 100%;
//   /* 宽度与父元素相同 */
//   height: 6px;
//   /* 高度设置为所需的边框宽度 */
//   background-image:
//     repeating-linear-gradient(to right,
//       transparent,
//       transparent 6px,
//       /* 控制虚线间隔 */
//       #fff 6px,
//       #fff 10px
//       /* 控制虚线宽度 */
//     ),
//     linear-gradient(to right, rgb(32, 119, 153) 50%, rgb(107, 198, 240) 50%);
//   /* 先应用渐变背景 */
// }

.configTitle {
  display: flex;
  align-items: center;
  line-height: 30px;
  color: #ffffff;
  font-weight: bold;


}

.middle {
  height: 100%;
  width: 100%;
  overflow: hidden;
  transition: all 1s;


  .farmingModel {
    height: calc(100% - 350px);
    margin-bottom: 50px;
    position: relative;
  }

}

.growthCycle {
  width: 100%;
  height: 300px;
  background-color: #003360;
  box-sizing: border-box;

  .growthItem {
    height: 50%;
    width: 100%;
    display: flex;
    align-items: center;

    &>div {
      width: 100%;
    }
  }

  .label {
    margin-bottom: 5px;
    font-size: 18px;
    color: #ffffff;
  }

  .cycle {
    width: 100%;
    padding: 15px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap;

    .growth {
      text-align: center;
      line-height: 30px;
      font-size: 12px;
      border: 1px solid #cecece;
      box-sizing: border-box;
      transition: all 0.3s;
      position: relative;

      .currentStage {
        position: absolute;
        top: -30px;
        left: 50%;
        transform: translate(-50%);
        font-size: 24px;
        color: #0593EB;
      }

      &:hover {
        box-shadow: 0 0px 10px 0px rgba(0, 0, 0, 0.3);
        border: 1px solirgb(170, 168, 168)ce;
        transform: translateY(-2px);
      }
    }
  }
}

.iframeView {
  width: 100%;
  height: 260px;
  position: relative;
  overflow: hidden;
}

.errorText {
  padding-left: 30px;
  color: #0AA0EB;
  text-align: center;
  line-height: 50px;
}

.titleIcon {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 10px;
  background-color: #1397ED
}

.removeRight {
  transform: translateX(100vw)
}

.removeLeft {
  transform: translateX(-100vw)
}

.removeMiddle {
  transform: translateY(100vh)
}

.growthInfoModule {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-100vh);
  transition: all 0.6s;
}

.removeGrowthInfoModule {
  transition: all 0.6s;
  transform: translateY(0)
}
</style>